import {createStackNavigator} from 'react-navigation-stack';
import {createSwitchNavigator} from 'react-navigation';
import WelcomePage from '../page/WelcomePage';
import HomePage from '../page/HomePage';
import DetailPage from '../page/DetailPage';
import WebViewPage from '../page/WebViewPage';
import AboutPage from '../page/about/AboutPage';
import AboutMePage from '../page/about/AboutMePage';
import CustomKeyPage from '../page/CustomKeyPage';
import SortKeyPage from '../page/SortKeyPage';
import SearchPage from '../page/SearchPage';
import LoginPage from '../page/LoginPage';
import FetchDemoPage from '../page/FetchDemoPage';
import AsyncStorageDemoPage from '../page/AsyncStorageDemoPage';
import DataStoreDemoPage from '../page/DataStoreDemoPage';
import {connect} from 'react-redux';
import {
  createReactNavigationReduxMiddleware,
  createReduxContainer,
} from 'react-navigation-redux-helpers';

export const rootCom = 'Init'; //设置根路由

const InitNavigator = createStackNavigator({
  WelcomePage: {
    screen: WelcomePage,
    navigationOptions: {
      headerShown: false,
    },
  },
});

const LoginNavigator = createStackNavigator({
  LoginPage: {
    screen: LoginPage,
    navigationOptions: {
      headerShown: false,
    },
  },
});

const MainNavigator = createStackNavigator({
  HomePage: {
    screen: HomePage,
    navigationOptions: {
      headerShown: false,
    },
  },
  DetailPage: {
    screen: DetailPage,
    navigationOptions: {
      headerShown: false,
    },
  },
  WebViewPage: {
    screen: WebViewPage,
    navigationOptions: {
      headerShown: false,
    },
  },
  AboutPage: {
    screen: AboutPage,
    navigationOptions: {
      headerShown: false,
    },
  },
  AboutMePage: {
    screen: AboutMePage,
    navigationOptions: {
      headerShown: false,
    },
  },
  CustomKeyPage: {
    screen: CustomKeyPage,
    navigationOptions: {
      headerShown: false,
    },
  },
  SortKeyPage: {
    screen: SortKeyPage,
    navigationOptions: {
      headerShown: false,
    },
  },
  SearchPage: {
    screen: SearchPage,
    navigationOptions: {
      headerShown: false,
    },
  },
  FetchDemoPage: {
    screen: FetchDemoPage,
    navigationOptions: {},
  },
  AsyncStorageDemoPage: {
    screen: AsyncStorageDemoPage,
    navigationOptions: {},
  },
  DataStoreDemoPage: {
    screen: DataStoreDemoPage,
    navigationOptions: {},
  },
});

export const RootNavigator = createSwitchNavigator(
  {
    Init: InitNavigator,
    Auth: LoginNavigator,
    Main: MainNavigator,
  },
  {
    navigationOptions: {
      headerShown: false,
    },
  },
);

/** * 1.初始化react-navigation与redux的中间件，
 * * 该方法的一个很大的作用就是为reduxifyNavigator的key设置actionSubscribers(行为订阅者)
 * * 设置订阅者@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L29
 * * 检测订阅者是否存在@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L97
 * * @type {Middleware}
 * */
export const middleware = createReactNavigationReduxMiddleware(
  state => state.nav,
  'root',
);

/** * 2.将根导航器组件传递给 createReduxContainer 函数,
 * * 并返回一个将navigation state 和 dispatch 函数作为 props的新组件；
 * * 注意：要在createReactNavigationReduxMiddleware之后执行 */
const AppWithNavigationState = createReduxContainer(RootNavigator, 'root');

/** * State到Props的映射关系 * @param state */
const mapStateToProps = state => ({
  state: state.nav,
});

/** * 3.连接 React 组件与 Redux store */
export default connect(mapStateToProps)(AppWithNavigationState);
